<div id="change-tx" class="well clearfix">
    <h1>头像设置</h1>
   
    <div>
        <div class="change-tx-left">
            <div class="screen-tx">
                <img id="tmp-tx"  src="" alt="">
            </div>
            <form role="form" id="upload-tx-form">
                <div class="form-group">
                    <input type="button" id="save-tx" class="btn btn-vmaig-auth" value="保存头像">
                    <button type="button" class="btn btn-info">选择图片</button>
                    <input type="file" id="upload-tx" name="upload-tx">
                </div>
            </form>
        </div>
        <div class="change-tx-right">
            <h4>头像预览</h4>
            <div id="preview-pane">
                <div class="preview-container" style="width:100px;height:100px;overflow:hidden;">
                    <img  src="{{user.img}}" alt="">
                </div>
            </div>
            大头像 100x100
        </div>
    </div>
    <!--
    <p>方法一：选择本地照片，上传编辑自己的头像</p>
    <button class="btn btn-vmaig">选择图片</button>支持jpg、jpeg、gif、png、bmp格式的图片
    <p>方法二：选择推荐头像，快速上传优质头像</p>
    -->


              
</div>
<script language="javascript" type="text/javascript">

var jcrop_api,boundx,boundy;
var image = new Image();
var x,y,width,height = 0;

$('#tmp-tx').Jcrop({onChange: updatePreview,
                    onSelect: updatePreview,
                    aspectRatio:1,
                    boxWidth:400,
                    boxHeight:300},
                    function(){
                        jcrop_api = this;
                   });

$("#upload-tx").change(function(){

    if(typeof FileReader == "undefined"){
        alert("您的浏览器不支持FileReader对象！");
    }

    var file = this.files[0];
    var reader = new FileReader();

    reader.readAsDataURL(file);

    
    reader.onload=function(e){
        image.src = e.target.result;
        $("#tmp-tx").attr("src",image.src);
        $("#preview-pane .preview-container img").attr("src",image.src);
        jcrop_api.setImage(image.src);
        preImage(image.src,function(){
                boundx = this.width;
                boundy = this.height;
            });
        
        console.log("boundx:"+boundx+" boundy:"+boundy);
    }

    
});

$("#save-tx").click(function(){
    console.log("x:"+x+" y:"+y+" width:"+width+" height:"+height);

    var canvas=$('<canvas width="'+width+'" height="'+height+'"></canvas>')[0],
    ctx=canvas.getContext('2d');

    ctx.drawImage(image,parseInt(x),parseInt(y),parseInt(width),parseInt(height),0,0,parseInt(width),parseInt(height));

    var data=canvas.toDataURL();

    // dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
    data=data.split(',')[1];
    data=window.atob(data);
    var ia = new Uint8Array(data.length);
    for (var i = 0; i < data.length; i++) {
        ia[i] = data.charCodeAt(i);
    };

    // canvas.toDataURL 返回的默认格式就是 image/png
    var blob=new Blob([ia], {type:"image/jpg"});

    var fd=new FormData();

    fd.append('file',blob);
    $.ajax({
        url:"/usercontrol/changetx",
        type:"POST",
        data:{"tx":canvas.toDataURL().split(',')[1]},
        beforeSend:function(xhr){
            xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));  
        },
        success:function(data,textStatus){
            alert(data);
            location.reload();
        },
        error:function(XMLHttpRequest, textStatus, errorThrown){
            alert(XMLHttpRequest.responseText);
        }

    });

});


function preImage(url,callback){  
    var img = new Image(); //创建一个Image对象，实现图片的预下载  
    img.src = url;  
 
    if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数  
        callback.call(img);  
        return; // 直接返回，不用再处理onload事件  
    }  

    img.onload = function () { //图片下载完毕时异步调用callback函数。  
        callback.call(img);//将回调函数的this替换为Image对象  
    };  
}  

function updatePreview(c){
     if (parseInt(c.w) > 0) {
        x = c.x;
        y = c.y;
        width = c.w;
        height = c.h;
        var rx = 100.0 / c.w;
        var ry = 100.0 / c.h;

        console.log("rx:"+ Math.round(rx * boundx)+" ry:"+ry);
        
        $("#preview-pane .preview-container img").css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
    }
}
 
</script>
